<template>
  <van-overlay :show="isShow">
    <div class="wrapper">
      <van-count-down v-if="isShow" :time="time" v-slot="{ seconds }" @finish="finish">
        <span class="seconds">{{ seconds }}</span>
      </van-count-down>
    </div>
  </van-overlay>
</template>

<script>
export default {
  name: "CountdownMask",
  props: ["onFinish"],

  data() {
    return {
      isShow: false,
      time: 3500,
    };
  },

  mounted() {},

  methods: {
    show(time = 3500) {
      this.isShow = true;
      this.time = time;
    },
    finish() {
      this.isShow = false;
      this.onFinish();
      //   this.$emit("finish");
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.seconds {
  font-size: 40px;
  color: #f00;
}
</style>
